import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { ListItemType } from "../../components";
import { Button } from "react-vant";
const Index: React.FC = () => {
  const location = useLocation();
  const item = location.state as ListItemType;
  const [isActive, setISActive] = useState(false);
  const navigate = useNavigate();
  const handleAbout = () => {
    const token = localStorage.getItem("token");
    if (!token) {
      navigate("/login");
      return;
    }

		setISActive(!isActive)
  };

  return (
    <div>
      <img src={item.url} alt="" width="100%" />
      <h3>
        {item.title}----
        <Button
          type={isActive ? "primary" : "default"}
          onClick={() => handleAbout()}
        >
          { isActive ? '已关注': '关注' }
        </Button>
      </h3>
      <p>{item.desc}</p>
    </div>
  );
};

export default Index;
